<template>
  <div class="lookroom">
    <p class="title">找房</p>
    <div class="main_form">
      <p class="form_title">帮我找房</p>
      <div class="form">
        <input
          type="text"
          placeholder="请输入意向城市、区域、意向楼盘"
          placeholder-style="font-size: 30rpx;margin-left: 20rpx;"
        />
        <div class="form_user">
          <input
            type="text"
            placeholder="请输入姓名"
            placeholder-style="font-size: 30rpx;margin-left: 20rpx;"
          />
          <input
            type="text"
            placeholder="请输入手机号"
            placeholder-style="font-size: 30rpx;margin-left: 20rpx;"
          />
        </div>
        <p>隐私保护已开启</p>
      </div>
      <button class="publish">发布需求</button>
      <p class="counselor">当前有148位置业顾问为您服务</p>
    </div>
    <div class="jumpLink">
      <ul @click="goBuyHouse">
        <li>
          <p>新房</p>
          <p>热门新楼盘></p>
        </li>
        <li></li>
      </ul>
      <ul @click="goMapFindRoom">
        <li>
          <p>地图找房</p>
          <p>查看附近好房源></p>
        </li>
        <li></li>
      </ul>
      <ul @click="goBroker">
        <li>
          <p>经纪人</p>
          <p>优选营业顾问></p>
        </li>
        <li></li>
      </ul>
      <ul @click="goHousing">
        <li>
          <p>楼市圈</p>
          <p>楼市最新动态></p>
        </li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goMapFindRoom() {
      wx.navigateTo({  // 跳转到地图找房
        url: "/pages/mapFindRoom/index",
      });
    },
    goBuyHouse(){
      wx.navigateTo({  // 跳转到买房
        url: "/pages/buy/index",
      });
    },
    goBroker(){
      wx.navigateTo({  // 跳转到经纪人
        url: "/pages/agent/index",
      });
    },
    goHousing(){
      wx.navigateTo({  // 跳转到楼市圈
        url: "/pages/housing/index",
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9f5f6;
}
.lookroom > .title {
  text-align: center;
  width: 100%;
  height: 280rpx;
  background: linear-gradient(90deg, #0e7ef3, #329ffd);
  border-bottom: 60rpx solid #0c7df7;
  line-height: 200rpx;
  color: #fff;
}
.main_form {
  width: 83%;
  height: 560rpx;
  background-color: #fff;
  border-radius: 25rpx;
  box-shadow: 2px 2px 5px #ddd;
  margin: -60rpx auto 0;
}
.form_title {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(#fddbdc, #fbf4f3);
  border-radius: 35rpx;
  text-align: center;
  line-height: 90rpx;
  font-weight: bold;
  color: #ff6970;
  font-size: 35rpx;
}
.form {
  width: 93%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.form > input {
  height: 80rpx;
  border-bottom: 1px solid #eee;
}
.form > p {
  font-size: 20rpx;
  margin-top: 10rpx;
  font-size: #ddd;
}
.form_user {
  display: flex;
  height: 100rpx;
  border-bottom: 1px solid #eee;
}
.form_user > input {
  margin-top: 25rpx;
}
.form_user > input:nth-child(2) {
  border-left: 2px solid #eee;
}
.publish {
  width: 93%;
  background-color: #ff666e;
  color: #fff;
  height: 85rpx;
  border-radius: 10rpx;
  margin-top: 35rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 85rpx;
}
.counselor {
  width: 93%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 40rpx;
  border: 2px solid #ff666e;
  background-color: #fff;
  color: #ff666e;
  font-size: 30rpx;
  margin: 30rpx auto 0;
}
.jumpLink {
  margin: 20rpx auto 0;
  width: 93%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.jumpLink > ul {
  margin: 20rpx 0 0;
  width: 40%;
  height: 100rpx;
  border-radius: 10rpx;
}
.jumpLink > ul:nth-child(1) {
  background-color: #f5f2eb;
}
.jumpLink > ul:nth-child(2) {
  background-color: #eff4f7;
}
.jumpLink > ul:nth-child(3) {
  background-color: #ebf5f4;
}
.jumpLink > ul:nth-child(4) {
  background-color: #f8f7f2;
}
.jumpLink > ul > li:nth-child(1) > p:nth-child(1) {
  font-size: 32rpx;
  margin: 10rpx 15rpx;
  font-weight: bold;
}
.jumpLink > ul > li:nth-child(1) > p:nth-child(2) {
  font-size: 23rpx;
  margin: 10rpx 15rpx;
}
.jumpLink > ul:nth-child(1) > li:nth-child(1) > p:nth-child(2) {
  color: #f58687;
}
.jumpLink > ul:nth-child(2) > li:nth-child(1) > p:nth-child(2) {
  color: #5fcaff;
}
.jumpLink > ul:nth-child(3) > li:nth-child(1) > p:nth-child(2) {
  color: #56cfb9;
}
.jumpLink > ul:nth-child(4) > li:nth-child(1) > p:nth-child(2) {
  color: #fdd06e;
}
</style>
